<!--
 * @Author: Rain
 * @Date: 2023/10/09 11:24:51
 * @LastEditTime: 2023/11/27 22:37:00
 * @Description: Do Something
-->
<template>
  <div class="w-full h-full p-20 flex flex-col">
    <div class="w-full flex items-center p-10 shadow-md mb-20">
      <div class="mr-20 flex items-center">
        <label for="" class="mr-10 whitespace-nowrap">班级:</label>
        <el-select v-model="query.classNo" placeholder="请选择班级">
          <el-option
            v-for="item in classList"
            :key="item.classNo"
            :label="item.name"
            :value="item.classNo"
          />
        </el-select>
      </div>
      <!-- <div class="mr-20 flex items-center">
        <label for="" class="mr-10 whitespace-nowrap">学员姓名:</label>
        <el-input
          v-model="query.userName"
          placeholder="学员姓名"
          size="normal"
          clearable
        />
      </div> -->
      <div class="mr-20 flex items-center">
        <label for="" class="mr-10 whitespace-nowrap">学员手机号:</label>
        <el-input
          v-model="query.mobile"
          placeholder="学员手机号"
          size="normal"
          clearable
        />
      </div>
      <div class="mr-20 flex items-center">
        <label for="" class="mr-10 whitespace-nowrap">打卡时间:</label>
        <el-date-picker
          v-model="query.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </div>
      <el-button type="primary" size="small" @click="getClockList(1)">查询</el-button>
    </div>
    <div class="w-full flex flex-col overflow-x-hidden overflow-y-auto flex-1">
      <div
        v-for="(item, index) in clockList"
        :key="index"
        class="w-full flex flex-col my-10 p-10 rounded border border-solid border-stone-200"
      >
        <div class="w-full flex items-center mb-10 font-medium">
          <div class="flex items-center mr-20">
            <span class="mr-10">昵称:</span>
            <span style="color: orange">{{ item.nickName }}</span>
          </div>
          <div class="flex items-center mr-20">
            <span class="mr-10">班级:</span>
            <span style="color: orange">{{ item.clockClass }}</span>
          </div>
          <div class="flex items-center mr-20">
            <span class="mr-10">手机号:</span>
            <span style="color: orange">{{ item.mobile }}</span>
          </div>
          <div class="flex items-center mr-20">
            <span class="mr-10">打卡时间:</span>
            <span style="color: orange">{{ item.createTime }}</span>
          </div>
          <div class="flex items-center flex-1 justify-end">
            <el-button
              type="primary"
              size="small"
              class="mr-10"
              @click="doAction(1, item)"
            >{{ item.status * 1 === 0 ? "审核" : "审核通过" }}</el-button>
            <el-button
              :type="item.excellent ? 'warning' : 'primary'"
              size="small"
              @click="doAction(2, item)"
            >优秀</el-button>
          </div>
        </div>
        <div class="w-full flex flex-wrap break-all text-16">
          {{ item.clockContent }}
        </div>
      </div>
    </div>
    <div class="w-full flex items-center justify-end p-10">
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next"
        :total="total"
        :page-size="query.size"
        :current-page.sync="query.page"
        @size-change="changeSize"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
import { initData } from '@/api/data'
import { updateSignRecord } from '@/api/course'
import dayjs from 'dayjs'
export default {
  props: {},
  data() {
    return {
      classList: [],
      clockList: [],
      pickerOptions: {},
      total: 0,
      query: {
        classNo: '',
        createTime: [],
        mobile: '',
        page: 0,
        size: 10,
        sort: 'createTime,desc'
      }
    }
  },
  mounted() {
    initData('api/courseClass/getAll').then((res) => {
      this.classList = res
      if (res && res.length > 0) {
        const course = this.classList.at(0)
        const { startDate, classNo, endDate } = course
        this.query.classNo = classNo
        this.query.createTime = [
          dayjs(startDate).format('YYYY-MM-DD 00:00:00'),
          dayjs(endDate).format('YYYY-MM-DD 23:59:59')
        ]
        this.query.page = 0
        this.pickerOptions = {
          disabledDate: (date) => {
            return (
              dayjs(date).isBefore(dayjs(startDate)) ||
              dayjs(date).isAfter(dayjs(endDate))
            )
          }
        }
        this.getClockList()
      }
    })
  },
  methods: {
    getClockList(flag) {
      if (flag) {
        this.clockList = []
        this.query.page = 0
      }
      const { createTime } = this.query
      this.query.createTime = [
        dayjs(createTime[0]).format('YYYY-MM-DD 00:00:00'),
        dayjs(createTime[1]).format('YYYY-MM-DD 23:59:59')
      ]
      initData('api/courseClock', this.query).then((res) => {
        const { content, totalElements } = res
        this.clockList = content
        this.total = totalElements
      })
    },
    doAction(flag, row) {
      if (flag === 1) {
        if (row.status === 1) return
      }
      this.$confirm(flag === 1 ? '确认审核通过?' : '确认设置为优质内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params =
            flag === 1
              ? Object.assign({}, row, { status: 1 })
              : Object.assign({}, row, { excellent: 1 })
          updateSignRecord(params).then((res) => {
            flag === 1 ? (row.status = 1) : (row.excellent = 1)
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    changeSize(e) {
      this.query.size = e
      this.clockList = []
      this.getClockList()
    },
    changePage(e) {
      this.query.page = e
      this.clockList = []
      this.getClockList()
    }
  }
}
</script>
<style scoped lang="scss">
.text-16 {
  font-size: 14px;
  line-height: 20px;
}
</style>
